<template>
  <div class="component-wrapper">
    <div
      v-for="article in data"
      :key="article.art_id"
      class="article"
      @click="onDetailPage(article.art_id)"
    >
      <!-- 一张图片情况 -->
      <div
        v-if="article.cover.type === 1"
        class="article-type1"
      >
        <section>
          <div class="title">{{ article.title }}</div>
          <div class="img-wrapper">
            <img :src="article.cover.images[0]">
          </div>
        </section>
        <footer>
          <span class="author">{{ article.aut_name }}</span>
          <span class="comment-count">{{ article.comm_count }}评论</span>
          <span class="time">{{ getTime(article.pubdate) }}</span>
        </footer>
      </div>
      <!-- 其他种图片情况 -->
      <div
        v-else
        class="article-other"
      >
        <div class="title">{{ article.title }}</div>
        <section>
          <div
            v-for="(img, i) in article.cover.images"
            :key="i"
            class="img-wrapper"
          >
            <img :src="img">
          </div>
        </section>
        <footer>
          <span class="author">{{ article.aut_name }}</span>
          <span class="comment-count">{{ article.comm_count }}评论</span>
          <span class="time">{{ getTime(article.pubdate) }}</span>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'
import moment from 'moment';
export default {
  name: 'ArticleList',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {

    };
  },
  computed: {
    // ...mapState('article', [
    //   'detailList',
    // ]),
  },
  methods: {
    ...mapActions('article', [
      'updateDetailsList'
    ]),
    // ...mapMutations('search', [
    //   'SET_DETAIL_LIST',
    // ]),
    getTime(timestamp) {
      return moment(timestamp).fromNow();
    },

    // 用query传参方式
    onDetailPage(id) {
      this.$router.push({
        path: '/detail-page',
        query: {
          id,
        }
      })
    }

    // 用params传参方式
    // onDetailPage(id) {
    //   this.$router.push({
    //     // 用params方式必须用到name 且在路由里也必须写name; 且路径后 必须跟 :id
    //     name: 'detail-page',
    //     params: {
    //       id,
    //     }
    //   })
    // }
  },
}
</script>

<style lang="less" scoped>
@import url('@/assets/style/common.less');
.component-wrapper{
  height: calc(100vh - 46px);
  overflow: auto;
  padding: 0 16px;
  .article {
    padding: 8px 0;
    border-bottom: 1px solid #e9e9e9;

    &:last-child {
      border: none;
    }

    .article-type1 section {
      grid-template-columns: 2fr 1fr;
      gap: 16px;
    }

    .article-other section {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    section {
      display: grid;
      margin: 8px 0;

      .img-wrapper {
        overflow: hidden;
        border-radius: 4px;

        img {
          height: 100%;
          width: 100%;
          // 图片适应父盒子的宽高
          object-fit: cover;
        }
      }
    }

    footer {
      .sub-text;

      span {
        margin-right: 8px;
      }
    }
  }
}

</style>
